<template xmlns:el="http://www.w3.org/1999/html">
  <div>
    <el-tabs type="border-card">
      <!--部门管理-->
      <el-tab-pane label="部门管理">
        <!--部门授权权限组弹框-->
        <el-dialog title="修改权限组" :visible.sync="changeFunType" center>
          <!--穿梭框-->
          <el-transfer v-model="deptValue" :props="{key: 'funTypeId',label: 'funTypeName'}" :data="funType" :titles="['未选权限组', '已选权限组']"></el-transfer>
          <span slot="footer" class="dialog-footer">
            <el-button @click="changeFunType = false">取 消</el-button>
            <el-button type="primary" @click="saveDeptJurisdiction">确 定</el-button>
          </span>
        </el-dialog>
        <!--新增部门弹框-->
        <el-dialog title="新增部门" :visible.sync="deptDialogVisible" center>
          <el-form :model="deptForm" status-icon ref="deptForm" label-width="100px">
            <el-form-item label="部门名称" prop="deptName" :label-width="formLabelWidth">
              <el-input type="text" v-model="deptForm.deptName" style="width:400px" autocomplete="off" clearable></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="deptDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveDept">确 定</el-button>
          </div>
        </el-dialog>
        <!--新增部门按钮-->
        <el-row>
            <el-col :span="12">
              <el-button type="text" @click="addDept">
                <el-button size="small" icon="el-icon-circle-plus-outline">新增部门</el-button>
              </el-button>
            </el-col>
        </el-row>
        <!--部门表格-->
        <el-table ref="multipleTable" :data="deptData" style="width: 100%;" id="deptTable">

          <el-table-column prop="deptId" label="部门编号" width="250px"></el-table-column>
          <el-table-column prop="deptName" label="部门名称"></el-table-column>
          <el-table-column prop="" label="操作" width="105px">
            <template slot-scope="d">
              <el-tooltip class="item" effect="dark" content="修改权限组" placement="bottom">
                <el-button size="mini" @click="editFuntype(d.row)" icon="el-icon-edit" type="primary" circle></el-button>
              </el-tooltip>
              <!-- <el-tooltip class="item" effect="dark" content="删除部门" placement="bottom">
                <el-button size="mini" @click="deleteDept(d.row)" icon="el-icon-delete" type="danger" circle></el-button>
              </el-tooltip> -->
            </template>
          </el-table-column>
        </el-table>

      </el-tab-pane>
      <!--职位管理-->
      <el-tab-pane label="职位管理">
        <!--查看/修改职位权限弹框-->
        <el-dialog title="修改权限" :visible.sync="changeJurisdiction" width="60%">

          <el-tabs tab-position="left" v-model="tabValue">
            <el-tab-pane v-for="item in jobFuntype" :label="item.funTypeName" :key="item.funTypeId" :name="item.funTypeName">
              <el-transfer :titles="['可选权限','已选权限']" v-model="jobValue" :props="{key: 'functionId',label: 'functionName'}" :data="item.functions">
              </el-transfer>
            </el-tab-pane>
          </el-tabs>

          <span slot="footer" class="dialog-footer">
            <el-button @click="changeJurisdiction = false">取 消</el-button>
            <el-button type="primary" @click="saveJobJurisdiction">确 定</el-button>
          </span>
        </el-dialog>
        <!--新增职位弹框-->
        <el-dialog title="新增职位" :visible.sync="jobDialogVisible" center>
          <el-form :model="jobForm" status-icon ref="jobForm" label-width="100px">
            <el-form-item label="职位名称" prop="jobName" :label-width="formLabelWidth">
              <el-input type="text" v-model="jobForm.jobName" style="width:400px" autocomplete="off" clearable></el-input>
            </el-form-item>
            <el-form-item label="所属部门"  prop="department" :label-width="formLabelWidth">
              <!--key绑定主键，要和select的value-key属性对应，引用字段名要一致，label用于显示内容，value值用来包含对象，用于提交-->
              <el-select v-model="jobForm.department" value-key="deptId" style="width:400px" placeholder="请选择所属部门">
                <el-option v-for="department in deptData" :key="department.deptId" :label="department.deptName" :value="department"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="empDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveJob">确 定</el-button>
          </div>
        </el-dialog>
        <!--新增职位按钮-->
        <el-row>
            <el-col :span="12">
              <el-button type="text" @click="addJob">
                <el-button size="small" icon="el-icon-circle-plus-outline">新增职位</el-button>
              </el-button>
            </el-col>
        </el-row>
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item v-for ="(item,index) in depts" :title="item.deptName" :key="index" :name="item.deptName">
            <el-table :data="item.jobs" style="width: 100%">
              <el-table-column prop="jobId" label="职位编号" width="250px"></el-table-column>
              <el-table-column prop="jobName" label="职位名称"></el-table-column>
              <el-table-column prop="" label="操作" width="105px">
                <template slot-scope="d">
                    <el-tooltip effect="dark" content="修改职位权限" placement="bottom">
                      <el-button size="mini" @click="editFuns(d.row)" icon="el-icon-edit" type="primary" circle></el-button>
                    </el-tooltip>
                    <!-- <el-tooltip class="item" effect="dark" content="删除职位" placement="bottom">
                      <el-button size="mini" @click="deleteJob(d.row)" type="danger" icon="el-icon-delete" circle></el-button>
                    </el-tooltip> -->
                  </template>
                </el-table-column>
            </el-table>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
      <!--员工管理-->
      <el-tab-pane label="员工管理">
        <div>
              <span style="padding: 0px 10px">
                <i class="el-icon-s-check"></i>
              </span>
          <el-select v-model="allValue" value-key="id" @change="findDeptEmp(allValue)" placeholder="根据部门查找员工" style="width: 180px">
            <el-option v-for="item in allOptions" :key="item.deptId"
                       :label="item.deptName" :value="item.deptId">
            </el-option>
          </el-select>

          <span style="padding: 0 10px 0 30px"><i class="fn el-icon-s-promotion"></i></span>
          <el-input v-model="searchParam" clearable placeholder="根据员工姓名查询" style="width: 180px"></el-input>
          <el-button @click="searchEmp" icon="el-icon-search" size="small" circle></el-button>
        </div>
          <!--新增员工按钮-->
          <el-row>
              <el-col :span="12" >
                  <span set-lan="html:员工信息">员工信息</span>
                  <small class="text-muted font-13">共{{totalSize}}条</small>
              </el-col>
              <el-col :span="12" class="text-right">
                <el-button type="text" @click="addEmp">
                  <el-button size="small" icon="el-icon-circle-plus-outline">新增员工</el-button>
                </el-button>
              </el-col>
          </el-row>
        <!--新增/修改员工弹框-->
        <el-dialog title="新增/修改员工" :visible.sync="empDialogVisible" center>
          <el-form :model="empForm" status-icon ref="empForm" label-width="100px" :rules="empRules">
            <el-form-item label="员工姓名" prop="empName" :label-width="formLabelWidth">
              <el-input type="text" v-model="empForm.empName" style="width:400px" autocomplete="off" clearable></el-input>
            </el-form-item>
            <el-form-item label="登录密码" prop="empPwd" :label-width="formLabelWidth">
              <el-input type="text" v-model="empForm.empPwd" style="width:400px" autocomplete="off" clearable></el-input>
            </el-form-item>
            <el-form-item label="员工性别" prop="empSex" :label-width="formLabelWidth">
              <el-radio-group v-model="empForm.empSex">
                <el-radio label="男">男</el-radio>
                <el-radio label="女">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="员工薪资" prop="empSalary" :label-width="formLabelWidth">
              <el-input v-model="empForm.empSalary" style="width:400px" autocomplete="off" clearable></el-input>
            </el-form-item>
            <el-form-item label="入职日期" :label-width="formLabelWidth" prop="empHireDate">
              <el-date-picker v-model="empForm.empHireDate" type="date" style="width:400px" placeholder="请选择入职日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="手机号码" prop="empTel" :label-width="formLabelWidth">
              <el-input v-model="empForm.empTel" style="width:400px" autocomplete="off" clearable></el-input>
            </el-form-item>
            <el-form-item label="所属部门" prop="department" :label-width="formLabelWidth">
              <!--key绑定主键，要和select的value-key属性对应，引用字段名要一致，label用于显示内容，value值用来包含对象，用于提交-->
              <el-select v-model="empForm.department" @change="selectDeptJob(empForm)" value-key="deptId" style="width:400px" placeholder="请选择所属部门">
                <el-option v-for="department in deptData" :key="department.deptId" :label="department.deptName" :value="department"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="职位" :label-width="formLabelWidth">
              <el-select v-model="empForm.job" value-key="jobId" style="width: 400px;" placeholder="请选择职位">
                <el-option v-for="job in deptJobData" :key="job.jobId" :label="job.jobName" :value="job"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否在职" prop="isTakeOn" :label-width="formLabelWidth">
              <el-radio-group v-model="empForm.isTakeOn">
                <el-radio label="是">是</el-radio>
                <el-radio label="否">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="empDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveEmp">确 定</el-button>
          </div>
        </el-dialog>
        <!--表格-->
        <el-table id="empTable" ref="multipleTable" :data="empData" tooltip-effect="dark" style="width: 100%">
          <el-table-column type="selection" ></el-table-column>
          <el-table-column prop="empId" label="员工编号"></el-table-column>
          <el-table-column prop="empName" label="员工姓名"></el-table-column>
          <el-table-column prop="department.deptName" label="所在部门"></el-table-column>
          <el-table-column prop="job.jobName" label="职位"></el-table-column>
          <el-table-column prop="empHireDate" label="入职日期">
            <template slot-scope="s">
              {{s.row.empHireDate | formatDate}}
            </template>
          </el-table-column>
          <el-table-column prop="isTakeOn" label="是否在职"></el-table-column>
          <el-table-column prop="" label="操作" width="150px">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" content="修改员工信息" placement="bottom">
                <el-button size="mini" @click="editEmpInfo(scope.row)" icon="el-icon-user" type="primary" circle></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除员工" placement="bottom">
                <el-button size="mini" @click="delEmp(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row style="margin-top:10px">
          <el-col :span="24" style="text-align: center">
            <el-pagination layout="prev, pager, next, jumper" :total="totalSize" @current-change="changePage"
                           :current-page.sync="currentPage" :page-size="pageSize"></el-pagination>
          </el-col>
          <el-col :span="6" class="text-right">
            <el-tooltip class="item" effect="dark" content="打印列表" placement="bottom">
              <el-button @click="empPrint('#empTable', '列表打印')" style="padding: 12px 12px" type="info" plain  icon="el-icon-printer"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="批量导出Excel格式数据" placement="bottom">
              <el-button @click="batchExportExcel" style="padding: 12px 12px" type="info" plain  icon="el-icon-document-copy"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="导出Excel格式全部数据" placement="bottom">
              <el-button @click="exportExcel" style="padding: 12px 12px" type="info" plain  icon="el-icon-document-remove"></el-button>
            </el-tooltip>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {formatTimeToStr} from '../assets/format.js'
import XLSX from 'xlsx'
import FileSaver from 'file-saver'
export default {
  data () {
    var validateName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入员工姓名'))
      } else if (value.length < 1 || value.length > 6) {
        callback(new Error('姓名必须是1-6位'))
      } else {
        callback()
      }
    }
    var validatePwd = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (value.length < 6 || value.length > 12) {
        callback(new Error('密码长度必须在6-12位'))
      } else {
        callback()
      }
    }
    return {
      formLabelWidth: '120px',
      // 部门的穿梭框
      deptValue: [],
      funType: [],
      // 保存部门授权
      deptId: 0,
      funTypeId: [],
      // 部门授权权限组弹框
      changeFunType: false,
      // 新增部门弹框
      deptDialogVisible: false,
      deptForm: {
        deptId: '',
        deptName: ''
      },
      // 部门表格数据源
      deptData: [],
      // 职位表格数据源
      depts: [],
      jobData: [],
      activeName: '总公司',
      deptJobData: [],
      // 职位的穿梭框
      jobValue: [],
      tabData: [],
      jobFuntype: [],
      funs: [],
      tabValue: '首页',
      // 授权
      jobId: 0,
      funId: [],
      // 修改职位权限的弹框
      changeJurisdiction: false,
      // 新增职位弹框
      jobDialogVisible: false,
      jobForm: {
        jobId: '',
        jobName: '',
        department: {
          deptId: '',
          deptName: ''
        }
      },
      // 员工表格数据源
      empData: [],
      totalSize: 0,
      pageSize: 6,
      currentPage: 1,
      searchParam: '', // 搜索内容
      // 新增员工弹框
      empDialogVisible: false,
      empForm: {
        empId: '',
        empName: '',
        empPwd: '',
        empSex: '',
        empHireDate: '',
        empSalary: '',
        empTel: '',
        isTakeOn: '',
        department: {
          deptId: '',
          deptName: ''
        },
        job: {
          jobId: '',
          jobName: ''
        }
      },
      // 自定义验证器，对员工信息的各种验证
      empRules: {
        empName: [{
          required: true,
          validator: validateName,
          trigger: 'blur'
        }],
        empPwd: [{
          required: true,
          validator: validatePwd,
          trigger: 'blur'
        }],
        empSex: [{
          required: true,
          message: '请选择性别'
        }],
        empSalary: [{
          required: true,
          message: '请输入员工薪资'
        }, {
          pattern: /^[1-9][0-9]*/,
          message: '员工薪资只能是数字且不能以0开头'
        }],
        empHireDate: [{
          required: true,
          message: '请选择入职日期'
        }],
        empTel: [{
          required: true,
          message: '请输入电话号码'
        },
        {
          pattern: /^1[3|4|5|7|8|9][0-9]\d{8}$/,
          message: '手机号码格式不对'
        }
        ],
        department: [{
          required: true,
          message: '请选择所在部门'
        }],
        job: [{
          required: true,
          message: '请选择职位'
        }],
        isTakeOn: [{
          required: true,
          message: '请选择是否在职'
        }]
      },
      allOptions: [{
        deptId: 0,
        deptName: '全部数据',
        manageId: null
      }],
      allValue: '',
      selectList: [],
      mulSelection: []
    }
  },
  methods: {
    initAllDept () {
      this.$axios.get('http://localhost:8088/dept-all-list')
        .then(v => {
          v.data.forEach(row => {
            this.allOptions.push(row)
          })
          this.deptData = v.data
        })
        .catch(function (v) {})
    },
    initDeptsData () {
      this.$axios.get('http://localhost:8088/dept-list')
        .then(v => {
          this.depts = v.data
        })
        .catch(function (v) {})
    },
    // 保存部门权限
    saveDeptJurisdiction () {
      this.$axios.post('http://localhost:8088/save-dept-jurisdiction',
        this.qs.stringify({
          str: JSON.stringify({
            deptId: this.deptId,
            funTypeId: this.deptValue
          })
        }))
        .then(v => {
          this.changeFunType = false
          this.initAllDept()
          this.depts = []
          this.$message({
            message: '部门授权成功',
            type: 'success'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消授权'
          })
        })
    },
    // 修改部门权限组
    editFuntype (department) {
      this.changeFunType = true
      this.deptId = department.deptId
      this.$axios.get('http://localhost:8088/dept-funtype', {params: {deptId: this.deptId}})
        .then(v => {
          this.funType = v.data.functionTypes
          this.deptValue = v.data.deptFunTypes
        })
        .catch(function (v) {})
    },
    addDept () {
      this.deptDialogVisible = true
      this.clearDeptForm()
    },
    saveDept () {
      if (this.deptForm.deptName === '' || this.deptForm.deptName === null) {
        this.$message.error('部门名称不可以为空!')
      } else {
        this.$axios.post('http://localhost:8088/save-dept', this.deptForm)
          .then(v => {
            this.clearDeptForm()
            this.initAllDept()
            this.deptDialogVisible = false
            this.$message({
              message: '添加部门成功',
              type: 'success'
            })
          }).catch()
      }
    },
    clearDeptForm () {
      this.deptForm = {
        deptId: '',
        deptName: ''
      }
    },
    deleteDept (dept) {
      this.$confirm('此操作将永久删除该部门和部门下的职位以及员工，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(v => {
        this.$axios.post('http://localhost:8088/delete-dept', this.qs.stringify({deptId: dept.deptId}))
          .then(v => {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.initAllDept()
            this.initDeptsData()
            this.initEmpData(this.currentPage, this.pageSize, this.searchParam)
          }).catch()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 部门职位级联下拉框
    selectDeptJob (emp) {
      this.$axios.get('http://localhost:8088/dept-job-list', {params: {deptId: emp.department.deptId}})
        .then(v => {
          this.deptJobData = v.data
        }).catch()
    },
    // 员工数据源
    initEmpData (currPage, pageSize, search) {
      this.$axios.get('http://localhost:8088/emp-list', {
        params: {
          page: currPage,
          size: pageSize,
          search: search
        }
      })
        .then(v => {
          this.empData = v.data.empForm
          this.totalSize = v.data.total
        })
        .catch(function (v) {})
    },
    changePage (currPage) {
      this.initEmpData(currPage, this.pageSize, this.searchParam)
    },

    searchEmp () {
      this.initEmpData(1, this.pageSize, this.searchParam)
    },
    // 按照部门查找员工
    findDeptEmp (val) {
      if (val === 0) {
        this.initEmpData(this.currentPage, this.pageSize, this.searchParam)
      } else {
        this.$axios.get('http://localhost:8088/dept-emp', {
          params: {
            page: this.currentPage,
            size: this.pageSize,
            deptId: val
          }
        })
          .then(v => {
            this.empData = v.data.rows
            this.totalSize = v.data.total
          })
          .catch(function (v) {})
      }
    },
    // 新增员工
    addEmp () {
      this.clearEmpForm()
      this.empDialogVisible = true
      this.$nextTick(() => {
        this.$refs.empForm.resetFields() // 去除验证信息
      })
    },
    // 保存新增/修改的员工
    saveEmp () {
      this.$refs.empForm.validate(valid => {
        if (valid) {
          this.$axios.post('http://localhost:8088/save-emp', this.empForm)
            .then(v => {
              this.initEmpData(this.currentPage, this.pageSize, this.searchParam)
              this.empDialogVisible = false
              this.clearEmpForm()
              this.$message({
                message: '添加/修改员工成功',
                type: 'success'
              })
            }).catch()
        } else {
          this.$message.error('请正确填写员工信息！')
          return false
        }
      })
    },
    // 修改员工信息
    editEmpInfo (emp) {
      this.empDialogVisible = true
      this.empForm.empId = emp.empId
      this.empForm.empName = emp.empName
      this.empForm.empPwd = emp.empPwd
      this.empForm.empSex = emp.empSex
      this.empForm.empHireDate = emp.empHireDate
      this.empForm.empSalary = emp.empSalary
      this.empForm.empTel = emp.empTel
      this.empForm.isTakeOn = emp.isTakeOn
      this.empForm.department = emp.department
      this.empForm.job = emp.job
      this.selectDeptJob(emp)
    },
    // 清空员工表单
    clearEmpForm () {
      this.empForm = {
        empId: '',
        empName: '',
        empPwd: '',
        empSex: '',
        empHireDate: '',
        empSalary: '',
        empTel: '',
        isTakeOn: '',
        department: {
          deptId: '',
          deptName: ''
        },
        job: {
          jobId: '',
          jobName: ''
        }
      }
    },
    // 删除员工
    delEmp (emp) {
      this.$confirm('此操作将永久删除该员工，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(v => {
        if (emp.isTakeOn === '是') {
          this.$message.error('该员工仍然在职，不可以删除！')
        } else {
          this.$axios.post('http://localhost:8088/delete-emp', this.qs.stringify({empId: emp.empId}))
            .then(v => {
              this.$message({
                type: 'success',
                message: '删除成功'
              })
              this.initEmpData(this.currentPage, this.pageSize, this.searchParam)
            }).catch()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // pdf打印员工
    empPrint (ele, fileName) {
      // 去除页面不必要的 head 标签内  内容， 避免影响打印页 ， title 为保存为 pdf 的文件时的 文件名
      document.head.innerHTML = '<meta charset="utf-8">\n' +
        ' <title> ' + fileName + '</title>\n' +
        ' <meta name="format-detection" content="telephone=no">\n' +
        ' <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">\n' +
        ' <meta name="viewport" content="width=device-width,initial-scale=1.0">\n' +
        ' <link rel="stylesheet" href="./static/css/contract.css"/>'
      document.body.innerHTML = document.querySelector(ele).outerHTML
      // 转异步 等待dom元素渲染（样式）完毕在打印
      setTimeout(() => {
        // 打印
        window.print()
        // 刷新页面
        window.location.reload()
      }, 20)
    },
    // 导出excel
    exportExcel () {
      var xlsxParam = { raw: true }// 转换成excel时，使用原始的格式
      var wb = XLSX.utils.table_to_book(document.querySelector('#empTable'), xlsxParam)
      var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: 'application/octet-stream;charset=utf-8' }),
          '员工信息导出.xlsx'
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout
    },
    // 批量导出excel batchList
    batchExportExcel () {
      this.mulSelection.forEach((item, i) => {
        this.$set(item, 'empId', item.empId)
        this.$set(item, 'empName', item.empName)
        this.$set(item, 'deptName', item.dept.deptName)
        this.$set(item, 'jobName', item.job.jobName)
        this.$set(item, 'empHireDate', item.empHireDate)
        this.$set(item, 'isTakeOn', item.isTakeOn)
        this.selectList.splice(i, 0, item)
      })
      // excel数据导出
      require.ensure([], () => {
        const {
          // eslint-disable-next-line camelcase
          export_json_to_excel
        } = require('../js/Export2Excel')
        const tHeader = ['员工编号', '员工姓名', '所在部门', '职位', '入职日期', '是否在职']
        const filterVal = ['empId', 'empName', 'deptName', 'jobName', 'empHireDate', 'isTakeOn']
        const list = this.selectList
        const data = this.formatJson(filterVal, list)
        export_json_to_excel(tHeader, data, '员工信息批量导出')
      })
      this.initEmpData(this.currentPage, this.pageSize, this.searchParam)
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    initJobData () {
      this.$axios.get('http://localhost:8088/job-list')
        .then(v => {
          this.jobData = v.data
        })
        .catch(function (v) {})
    },
    addJob () {
      this.jobDialogVisible = true
      this.clearJobForm()
    },
    saveJob () {
      this.$axios.post('http://localhost:8088/save-job', this.jobForm)
        .then(v => {
          this.clearJobForm()
          this.initDeptsData()
          this.initJobData()
          this.jobDialogVisible = false
          this.$message({
            message: '添加职位成功',
            type: 'success'
          })
        }).catch()
    },
    clearJobForm () {
      this.jobForm = {
        jobId: '',
        jobName: '',
        department: {
          deptId: '',
          deptName: ''
        }
      }
    },
    editFuns (job) {
      this.jobId = job.jobId
      this.$axios.get('http://localhost:8088/job-funType', {params: {jobId: this.jobId}})
        .then(v => {
          this.tabData = v.data
          this.jobFuntype = v.data.functionTypes
          this.jobValue = v.data.jobFuns
        })
        .catch(function (v) {})
      this.changeJurisdiction = true
    },
    deleteJob (job) {
      this.$confirm('此操作将永久删除该职位和职位下的员工，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(v => {
        this.$axios.post('http://localhost:8088/delete-job', this.qs.stringify({jobId: job.jobId}))
          .then(v => {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.initDeptsData()
            this.initEmpData(this.currentPage, this.pageSize, this.searchParam)
          }).catch()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    saveJobJurisdiction () {
      this.$axios.post('http://localhost:8088/save-job-jurisdiction',
        this.qs.stringify({
          str: JSON.stringify({
            jobId: this.jobId,
            funId: this.jobValue
          })
        }))
        .then(v => {
          this.changeJurisdiction = false
          this.initJobData()
          this.$message({
            message: '职位授权成功',
            type: 'success'
          })
        }).catch(() => {
          this.$message({
            message: '已取消授权',
            type: 'info'
          })
        })
    }
  },

  // components: { treeTransfer }, // 注册
  created: function () {
    this.initAllDept()
    this.initDeptsData()
    this.initJobData()
    this.initEmpData(this.currentPage, this.pageSize, this.searchParam)
  },

  filters: {
    formatDate: function (time) {
      // eslint-disable-next-line eqeqeq
      if (time != null && time != '') {
        var date = new Date(time)
        return formatTimeToStr(date, 'yyyy-MM-dd')
      } else {
        return ''
      }
    }
  }
}
</script>
<style>
  .text-right {
    text-align: right;
    float: right;
  }
</style>
